<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-card shadow="always">
          <div class="head-container">
            <el-tree
              :data="fiscalPeriodOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              ref="tree"
              default-expand-all
              node-key="id"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-card shadow="always">
          <el-table v-loading="loading" ref="table" :data="fiscalPeriodList" @row-click="clickRow" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="会计年度" align="center" prop="fiscalYear" />
            <el-table-column label="会计期间" align="center" prop="period" />
            <el-table-column label="会计期间开始时间" align="center" prop="periodBeginTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.periodBeginTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="会计期间结束时间" align="center" prop="periodFinishTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.periodFinishTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="显示顺序" align="center" prop="orderNum" />
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listFiscalPeriod } from "@/api/system/fiscalPeriod";
import { fiscalPeriod } from "@/api/property/community";

export default {
  name: "FiscalPeriod",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 非多个禁用
      multiple: false,
      // 导出遮罩层
      exportLoading: false,
      // 总条数
      total: 0,
      // 会计期间表格数据
      fiscalPeriodList: [],
      // 弹出层标题
      title: "设置会计期间",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        fiscalYear: '2018',
        period: null,
        periodBeginTime: null,
        periodFinishTime: null,
        orderNum: null
      },
      //年度字典
      fiscalPeriodOptions:[],
      defaultProps: {
        children: "children",
        label: "label"
      },
      community:{},
      selection:[]
    };
  },
  created() {

  },
  methods: {
    show(row){
      this.community = row
      this.fiscalPeriodOptions = [];
      this.getDicts("fiscal_period").then(response => {
        let kjnd = {label:'会计年度',children:[]};
        for(let i in response.data){
          let row = response.data[i];
          kjnd.children.push({label:row.dictLabel,id:row.dictValue})
        }
        this.fiscalPeriodOptions.push(kjnd);
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey("2018");
        })
        this.open = true
      });
      this.getList()
    },
    /** 查询会计期间列表 */
    getList() {
      this.loading = true;
      listFiscalPeriod(this.queryParams).then(response => {
        this.fiscalPeriodList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.fiscalYear = data.id;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if (!this.multiple && selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.table.toggleRowSelection(del_row, false)
      }
      this.selection = selection
    },
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    submitForm(){
      if(null != this.selection && this.selection.length > 0){
        let model = {
          fiscalPeriodId:this.selection[0].id,
          id:this.community.id
        }
        fiscalPeriod(model).then(res=>{
          this.$emit("ok",this.selection)
          this.open = false;
          this.msgSuccess("设置成功!");
        })
      }
    }
  }
};
</script>
